<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <div>
            <span>姓：</span>
            <span>
                <input type="text" v-model='firstName'>
            </span>
        </div>
        <div>
            <span>名：</span>
            <span>
                <input type="text" v-model='lastName'>
            </span>
        </div>
        <div> 全名: {{fullName}}</div>


    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                firstName: '爱新觉罗',
                lastName: "张三疯",
                fullName: ''
            },

            methods: {},
            computed: {
                // fullName() {
                //     return this.firstName+this.lastName
                // }
            },
            watch: {
                //     fullName:function('新值','旧值') {

                // }

                firstName: {
                    handler: function (newVal, oldVal) {
                        console.log('newVal', newVal);
                        console.log("oldVal", oldVal);
                        this.fullName = newVal + this.lastName
                    },
                    immediate: true

                },

                lastName: {
                    handler: function (newVal, oldVal) {
                        this.fullName = this.firstName + newVal
                    },
                    immediate: true
                }


            }




        })
    </script>
</body>

</html>